<template>
    <div class="all">
        <el-radio-group v-model="radio">
      <el-radio-button label="接量方案"></el-radio-button>
      <el-radio-button label="明细信息"></el-radio-button>
    </el-radio-group>
    <div class="programme" v-if="radio=='接量方案'">
        <div class="header">
        <div class="header-item">
			<span>方案名称</span>	
		<el-input
  placeholder="请输入方案名称"
  size="mini"
  v-model="searchQuery.name"
  clearable>
</el-input>
<div class="search-button">
	<el-button type="primary" icon="el-icon-search" size="mini" @click="search">查询</el-button>
	<el-button icon="el-icon-refresh" size="mini" @click="reset">重置</el-button>
 </div>
</div>
</div>
<div class="add-button">
        <el-button type="primary" icon="el-icon-plus" size="mini"  @click="addProj">新增</el-button>
    </div>
<el-table
    :data="tableData"
    v-loading="loading"
    style="width: 98%;margin: 20px  0 ;">
    <el-table-column
     prop="id"
      label="方案ID"
    fixed
     >
    </el-table-column>
    <el-table-column
     prop="name"
      label="方案名称"
     >
    </el-table-column>
    <el-table-column
     prop="category_title"
      label="落地页类别"

     >
    </el-table-column>
    <el-table-column
     prop="teacher_count"
      label="接量老师"
     >
    </el-table-column>
    <el-table-column
     prop="auto_flag_title"
      label="新增老师自动添加"
     >
    </el-table-column>
    <el-table-column
     prop="default_status_title"
      label="接量状态默认"
     >
    </el-table-column>
    <el-table-column
     prop="real_name"
      label="最近修改人"
     >
    </el-table-column>
    <el-table-column
     prop="update_time"
      label="最近修改时间"
     >
    </el-table-column>
    <el-table-column
     prop="wechat_name"
      label="操作"
      fixed="right"
     >
     <template slot-scope="scope">
        <el-button type="text" size="small" @click="changeItem(scope.row,true)">查看</el-button>
        <el-button type="text" size="small" @click="changeItem(scope.row)">修改</el-button>
      </template>
    </el-table-column>
</el-table>
<pagination 
	 class="footer-page"
   v-show="total>0"
      :total="total"
      :page.sync="searchQuery.page"
      :limit.sync="searchQuery.pageSize"
      @pagination="init"
	/>
    </div>
    <div class="programme" v-else>
        <div class="header">
        <div class="header-item">
			<span>方案名称</span>	
            <el-select v-model="detailSearchQuery.project_ids" multiple placeholder="请选择方案名称"   size="mini" clearable collapse-tags style="margin-right: 20px;">
    <el-option
      v-for="item in optionsProj"
      :key="item.id"
      :label="item.name"
      :value="item.id">
    </el-option>
  </el-select>
<span>老师名称</span>	
<el-select v-model="detailSearchQuery.teacher_ids" multiple placeholder="请选择老师名称"   size="mini" filterable clearable collapse-tags style="margin-right: 20px;">
    <el-option
      v-for="item in optionsTech"
      :key="item.id"
      :label="item.wechat_name"
      :value="item.id">
    </el-option>
  </el-select>
<div class="search-button">
	<el-button type="primary" icon="el-icon-search" size="mini" @click="searchInfo">查询</el-button>
	<el-button icon="el-icon-refresh" size="mini" @click="resetInfo">重置</el-button>
 </div>
</div>
</div>
<el-table
    :data="detailData"
      v-loading="detailLoading"
    style="width: 95%;margin: 20px  0 ;">
    <el-table-column
      prop="project_name"
      label="方案名称"
     >
    </el-table-column>
    <el-table-column
      prop="teacher_name"
      label="老师名称"
     >
    </el-table-column>
    <el-table-column
      prop="teacher_id"
      label="老师ID"
     >
    </el-table-column>
    </el-table>
    <pagination 
	 class="footer-page"
   v-show="detailTotal>0"
      :total="detailTotal"
      :page.sync="detailSearchQuery.page"
      :limit.sync="detailSearchQuery.pageSize"
      @pagination="initInfo"
	/>
    </div>
    <el-dialog
  :title="addTitle"
  :visible.sync="addFlag"
  append-to-body
  destroy-on-close
  width="900px"
  :before-close="handleClose">
  <addProj :editOne="editOne" @refresh="reLoad" :disableFlag="disableFlag"></addProj>
</el-dialog>
</div>
</template>
<script>
import {  getList,getInfoList,getOptionListP,getOptionListT } from "@/api/programme.js";
import addProj from './addProj'
export default {
    components:{
        addProj
    },
    data() {
        return {
            loading:true,
            detailLoading:true,
            addFlag: false,
            disableFlag:false,
            editOne:'',
            addTitle:'新增',
            radio:'接量方案',
            optionsTech:[],
            optionsProj:[],
            total:0,
            detailTotal:0,
            tableData:[],
            detailData:[],
            searchQuery:{
                page: 1,
                pageSize: 20,
                name:''
            },
            detailSearchQuery:{
                page: 1,
                pageSize: 20,
                project_ids:[],
                teacher_ids: []
            }
        }
    },
    methods: {
        reLoad(){
            this.addFlag=false
             this.editOne=''
            setTimeout(() => {
                this.init() 
            }, 400);
        },
        changeItem(item,flag){
            this.disableFlag=flag?flag:false
            flag?this.addTitle="查看":this.addTitle="修改"
            this.addFlag=true
            this.editOne=item
        },
        handleClose(){
              this.editOne=''
              this.addTitle="新增"
              this.addFlag=false
        },
        addProj(){
            this.disableFlag=false
            this.addFlag=true
        },
        init(){
            this.loading=true
            getList(this.searchQuery).then(res=>{
                this.loading=false
                this.total=res.data.total
                this.tableData=res.data.data
            })
        },
        initInfo(){
            this.detailLoading=true
            getInfoList(this.detailSearchQuery).then(res=>{
                this.detailLoading=false
                this.detailTotal=res.data.total
                this.detailData=res.data.data
            })
        },
        search(){
            this.searchQuery.page=1
            this.init()
        },
        searchInfo(){
            this.detailSearchQuery.page=1
            this.initInfo()
        },
        reset(){
            this.searchQuery={
                page: 1,
                pageSize: 20,
                name:''
            }
            this.init()
        },
        resetInfo(){
          this.detailSearchQuery= {
                page: 1,
                pageSize: 20,
                project_ids:[],
                teacher_ids: []
            }
            this.initInfo()
        }
    },
    created() {
        getOptionListP().then(res=>{
            this.optionsProj=res.data
        })
        getOptionListT().then(res=>{
            this.optionsTech=res.data
        })
        this.init()
        this.initInfo()
    },
}
</script>
<style lang="scss" scoped>
.all{
    margin-top: 20px;
	 margin-left: 40px;
	 padding-bottom: 25px;
    .programme{
        margin-top: 20px;
	 padding-bottom: 25px;
        .header{
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			.header-item{
				display: flex ;
				justify-content: space-between;
				align-items: center;
				span{
   					 font-size: 14px;
                     min-width:70px;
   				 color: #606266;
    			line-height: 40px;
    			padding: 0 12px 0 0;
    			-webkit-box-sizing: border-box;
    				box-sizing: border-box;
				font-weight: 700;
				}
			}
            .select-item{
                width: 270px;
            }
			.search-button{
				margin-left: 40px;
				display: flex;
				align-items: center;
			}
		}
    .add-button{
        margin-top: 20px;
    }
    }
}
</style>